<template>
  <n-card header-style="background-color:#fafafa" class="my-2" title="相似实例推荐">
    <n-flex justify="center" class="my-4 ">
      <div class="w-5/6">

        <n-grid x-gap="12" y-gap="12" :cols="4">

          <template v-for="(i, index) in options_list" :key="i.id">
            <n-gi :span="2">
              <n-card :title="'参考示例' + (index + 1)">
                <v-chart autoresize :option="i" class="h-chart-height w-full"></v-chart>
              </n-card>
            </n-gi>
          </template>
        </n-grid>
      </div>
    </n-flex>

  </n-card>
  <n-card header-style="background-color:#fafafa" class="my-2" title="结果分析">
    <n-flex justify="center" class="my-4 ">
        <n-grid x-gap="12" y-gap="12" :cols="4">
          <n-gi :span="4">
            <n-card title="预测曲线与置信区间" class="h-full">

              <v-chart autoresize :option="line_options" class="h-chart-height w-full"></v-chart>
            </n-card>
          </n-gi>
        </n-grid>

    </n-flex>

  </n-card>
</template>

<script setup>
import { useAnalyzerStore } from '@/stores/analyzerStore';
import * as echarts from 'echarts';
import VChart from 'vue-echarts';
const analyzerStore = useAnalyzerStore();
import { ref, onMounted } from 'vue';
const options_list = ref([]);

const line_options = ref(
  {
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value',
      scale: true
    },
    series: [

      {
        name: 'L',
        type: 'line',
        data: [],
        lineStyle: {
          opacity: 0.1
        },
        stack: 'confidence-band',
        symbol: 'none'
      },
      {
        name: 'U',
        type: 'line',
        data: [],
        lineStyle: {
          opacity: 0.1
        },
        areaStyle: {
          color: '#ccc'
        },
        stack: 'confidence-band',
        symbol: 'none'
      },
      {
        type: 'line',
        data: [],
      }
    ]
  }
)
onMounted(async () => {

  for (let i of analyzerStore.result) {

    let temp_options = {
      xAxis: {
        data: []
      },
      yAxis: { scale: true, },
      // o c l h
      series: [
        {
          type: 'candlestick',
          data: []
        }
      ]
    }
    for (let j = 0; j < i['predict_open'].length + 1; j++) {
      temp_options.xAxis.data.push('第' + (parseInt(j) + 1) + '天');
    }
    temp_options.series[0].data.push([i['open'], i['close'], i['low'], i['high']])
    for (let j = 0; j < i['predict_open'].length; j++) {
      temp_options.series[0].data.push([i['predict_open'][j], i['predict_close'][j], i['predict_low'][j], i['predict_high'][j]])
    }
    options_list.value.push(temp_options);
  }
  await initLintOptions();
  // for(let i of analyzerStore.result){
  //   options.value.xAxis.data.push(new Date(i.date * 1000).toISOString().split('T')[0]);
  // }

})

const initLintOptions = () => {
  let max_close_list = [];
  let min_close_list = [];
  let mid_close_list = [];
  let length = analyzerStore.result[0].bound_close.length;
  for (let i = 0; i < length; i++) {
    let min_close = analyzerStore.result[0].bound_close[i], max_close = analyzerStore.result[0].bound_close[i], mid_close;
    for (let j of analyzerStore.result) {
      if (j.bound_close[i] >= max_close) {
        max_close = j.bound_close[i]
      }
      if (j.bound_close[i] <= min_close) {
        min_close = j.bound_close[i]
      }
    }
    mid_close = (max_close + min_close) / 2;
    max_close_list.push(max_close - min_close);
    min_close_list.push(min_close);
    mid_close_list.push(mid_close);
  }
  for (let i = 0; i < length; i++) {
    let n = parseInt(i) + 1;
    line_options.value.xAxis.data.push('第' + n + '天');
  }
  line_options.value.series[0].data = min_close_list;
  line_options.value.series[1].data = max_close_list;

  line_options.value.series[2].data = mid_close_list;

}


</script>